<template>
    <div class="app-container home">
        <h1>用户年度总结</h1>
        <div class="data-overview">
            <!-- 24小时听歌趋势 -->
            <div class="left-bar-50">
                <h2>年度歌单</h2>
                <div id="app">
                    <ShowPlaylist />
                </div>
            </div>

            <!-- 热门流派分布 -->
            <div class="right-bar-50">
                <h2>年度音乐流派</h2>
                <h4>（点击标签即可查看相关歌曲）</h4>
                <wordCloud />
            </div>
          <div class="center-bar-50">
            <TagTrendChart />
          </div>
        </div>

        <!-- TOP50歌曲轮播 -->
        <div class="top-songs">
            <h2>🔥 年度TOP10歌曲</h2>
            <div>
                <BarCharts />
            </div>
        </div>

        <!-- TOP10歌手卡片 -->
        <div class="top-artists">
            <h2>🎤 年度TOP5歌手</h2>
            <el-row :gutter="20">
                <el-col
                    v-for="artist in artists"
                    :key="artist.id"
                    :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <div class="artist-card">
                        <el-image :src="artist.avatar" fit="cover" class="avatar"/>
                        <div class="info">
                            <h3>{{ artist.name }}</h3>
                            <p>播放量：{{ artist.playCount }}万</p>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="app-container">
            <div id="app">
                <PieChart />
            </div>
        </div>

    </div>
</template>

<script setup name="Index">
import PieChart from '@/components/personal_charts/PieChart.vue';
import BarCharts from '@/components/personal_charts/BarChart.vue';
import wordCloud from "@/components/personal_charts/WordCloud.vue";
import TagTrendChart from "@/components/personal_charts/TagTrendChart.vue";
import ShowPlaylist from "@/components/personal_charts/ShowPlaylist.vue";
components: {wordCloud}


const version = ref('3.8.9')
function goTarget(url) {
    window.open(url, '__blank')
}

</script>

<style scoped lang="scss">
.home-container {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #fff;
    min-height: 100vh;

    .main-header {
        display: flex;
        align-items: center;
        background: rgba(0,0,0,0.3);
        .logo {
            font-size: 24px;
            font-weight: bold;
            background: linear-gradient(45deg, #ff6b6b, #ff8e53);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .search-box {
            width: 400px;
            margin: 0 50px;
        }
    }

    .data-overview {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 20px;
        padding: 20px;
        height: 600px;

        .chart-card {
            background: rgba(255,255,255,0.1);
            border-radius: 12px;
            padding: 20px;
            backdrop-filter: blur(10px);
        }
    }

    .top-songs {
        .song-group {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 15px;
            padding: 15px;

            .song-item {
                display: flex;
                align-items: center;
                padding: 10px;
                background: rgba(255,255,255,0.05);
                border-radius: 8px;

                .rank {
                    color: #ffd700;
                    font-weight: bold;
                    margin-right: 10px;
                }
            }
        }
    }

    .top-artists {
        .artist-card {
            margin: 10px;
            background: rgba(255,255,255,0.05);
            border-radius: 12px;
            overflow: hidden;
            transition: transform 0.3s;

            &:hover {
                transform: translateY(-5px);
            }

            .avatar {
                height: 200px;
                width: 100%;
            }

            .info {
                padding: 15px;
                text-align: center;
            }
        }
    }
}
.home {
    blockquote {
        padding: 10px 20px;
        margin: 0 0 20px;
        font-size: 17.5px;
        border-left: 5px solid #eee;
    }
    hr {
        margin-top: 20px;
        margin-bottom: 20px;
        border: 0;
        border-top: 1px solid #eee;
    }
    .col-item {
        margin-bottom: 20px;
    }

    ul {
        padding: 0;
        margin: 0;
    }

    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
        list-style-type: none;
    }

    h4 {
        margin-top: 0px;
    }

    h2 {
        margin-top: 10px;
        font-size: 26px;
        font-weight: 100;
    }

    p {
        margin-top: 10px;

        b {
            font-weight: 700;
        }
    }

    .update-log {
        ol {
            display: block;
            list-style-type: decimal;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0;
            margin-inline-end: 0;
            padding-inline-start: 40px;
        }
    }
}
.app {
    font-family: Arial, sans-serif;
    text-align: center;
    margin-top: 50px;
}
.left-bar {
    float: left;
    width: 60%;
    //position: absolute;
    //overflow: auto;
}
.right-bar {
    float: right;
    right: 0px;
    width: 40%;
    //position: absolute;
    //overflow: auto;
}
.left-bar-50 {
    float: left;
    width: 50%;
    height: 400px;
    //position: absolute;
    //overflow: auto;
}
.center-bar-50 {
  display: flex;
  justify-content: center;
  width: 100%;
}
.right-bar-50 {
    float: right;
    right: 0px;
    width: 50%;
    height: 400px;
    //position: absolute;
    //overflow: auto;
}
.warn{
    color: red;
}
</style>

